<template>
    <van-sticky>
        <van-nav-bar title="探索与发现" @click-left="onClickLeft()">
            <!-- <template #right><van-icon name="share" color="#29b3b1" /></template> -->
        </van-nav-bar>
    </van-sticky>
    <div v-if="showLoading">
        <div class="skeleton-box" v-for="item in [1, 2, 3]" :v-bind:key="item">
            <div class="pre-title">
                <van-skeleton-paragraph />
                <van-skeleton-paragraph row-width="60%" />
            </div>
            <div class="pre-img">
                <van-skeleton-image image-size="100px" />
                <van-skeleton-image image-size="100px" />
                <van-skeleton-image image-size="100px" />
            </div>
            <van-skeleton-paragraph row-width="40%" />
        </div>
    </div>
    <div v-else class="scroll-box" v-if="articleList && articleList.length" @scroll="pageScroll">
        <div v-for="article in articleList" v-bind:key="article.id" class="article-item"
            @click="changeToDetail(article.id)">
            <div class="title">
                <!-- <van-text-ellipsis rows="2" :content="article.title" /> -->
                {{ article.title }}
            </div>
            <div class="img-box" v-if="article.imgSrc">
                <!--(JSON.parse(article.imgSrc)).length > 3 ? (JSON.parse(article.imgSrc)).slice(0, 3) : (JSON.parse(article.imgSrc))-->
                <div class="img-item" v-for="item in JSON.parse(article.imgSrc)" v-bind:key="item.src">
                    <van-image :src="item.src" fit="contain" width="100%" height="100%" lazy-load></van-image>
                </div>
            </div>
            <div class="bottom-info">
                <span class="text-padding">{{ article.read_num }}阅读</span>
                <span class="text-padding">{{ article.comment }}评论</span>
                <span>{{ article.created_at }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
//TextEllipsis as VanTextEllipsis,
import { showToast, showLoadingToast } from "vant";
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import _service from "../request/axios";
const router = useRouter();
let currentPage = ref(1);
const limit = ref(5);
let articleList = ref([]);
let isArticleLoading = ref(true);
let isTotal = ref(false);
let showLoading = ref(true);
let dataLoading = ref(false);

function getArticleList() {
    showLoadingToast("加载中...");
    dataLoading.value = true;
    let params = {
        page: currentPage.value,
        limit: limit.value
    }
    if (localStorage.getItem("token")) {
        params.recomArticle = localStorage.getItem("recomArticle");
    }
    _service.get("/article/list", {
        params: params
    }).then(res => {
        if (!res.code) {
            if (!articleList.value.length) articleList.value = res.data.list;
            else {
                articleList.value = articleList.value.concat(res.data.list);
            }
            isTotal.value = res.data.isTotal;
            if (res.data.recomArticle) {
                localStorage.setItem("recomArticle", res.data.recomArticle);
            }
            isArticleLoading.value = false;
            currentPage.value++;
            showLoading.value = false;
            dataLoading.value = false;
        }
    })
}
function pageScroll(e) {
    if (e.target.scrollTop + e.target.clientHeight + 10 > e.target.scrollHeight) {
        console.log("触底函数被触发！");
        //重新发送请求，获取新一批衣服的数据
        if (!isTotal.value) {
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
            });
            if (!dataLoading.value) {
                getArticleList();
            }
        } else {
            showToast({
                message: '再怎么找也没有啦~',
                wordBreak: 'break-word'
            });
        }
    }
}

function onClickLeft() {
    router.back();
}
function changeToDetail(id) {
    router.push({
        path: 'detail/article',
        query: {
            id
        }
    })
}
// function navToPage(route) {
//     router.push({
//         path: route
//     })
// }
onMounted(() => {
    getArticleList();
})
</script>
<style lang="less">
.scroll-box {
    padding-bottom: 40px;
    width: 100%;
    overflow: scroll;
    height: calc(100vh - 90px);
}

.article-item {
    padding: 0px 10px 10px;
    border-bottom: 1px #d1d2d4c7 solid;
    margin-bottom: 10px;

    .title {
        text-align: left;
        // font-weight: bold;
        line-height: 20px;
    }

    .bottom-info {
        margin-top: 8px;
        font-size: 14px;
        color: #8c8c8c;
        text-align: left;
    }

    .text-padding {
        padding-right: 4px;
    }
}

.img-box {
    display: flex;
    height: 100px;

    .img-item {
        width: 100%;
        height: 100%;
    }
}

.skeleton-box {
    margin-top: 10px;
}

.pre-img {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
</style>